import { Image, Swiper, SwiperItem, Text, View } from "@tarojs/components";
import { AtCard, AtIcon } from "taro-ui";

definePageConfig({
  navigationBarTitleText: "视界",
});

export default function Home() {
  return (
    <View className="flex flex-col py-4 gap-4">
      <View className="flex h-[30vw]">
        <AtCard className="w-[30vw] h-full bg-gradient-to-b from-primary to-primary-active">
          <AtIcon value="plus" />
        </AtCard>
      </View>

      <View className="flex justify-between p-4">
        <View className="flex items-center justify-center w-16 h-16 rounded-lg bg-white">
          <AtIcon value="search" />
        </View>
        <View className="flex items-center justify-center w-16 h-16 rounded-lg bg-white">
          <AtIcon value="search" />
        </View>
        <View className="flex items-center justify-center w-16 h-16 rounded-lg bg-white">
          <AtIcon value="search" />
        </View>
        <View className="flex items-center justify-center w-16 h-16 rounded-lg bg-white">
          <AtIcon value="search" />
        </View>
      </View>
      <AtCard>
        <Swiper
          indicatorColor="#C4C4C4"
          indicatorActiveColor="#4e9ae6"
          circular
          indicatorDots
          autoplay
          className="h-16"
        >
          <SwiperItem className="overflow-visible">
            <Image
              src="https://picsum.photos/360/240"
              mode="aspectFill"
              className="w-full h-full"
            />
          </SwiperItem>
          <SwiperItem className="overflow-visible">
            <Image
              src="https://picsum.photos/360/240"
              mode="aspectFill"
              className="w-full h-full"
            />
          </SwiperItem>
          <SwiperItem className="overflow-visible">
            <Image
              src="https://picsum.photos/360/240"
              mode="aspectFill"
              className="w-full h-full"
            />
          </SwiperItem>
        </Swiper>
      </AtCard>
      <View className="overflow-x-auto snap-x scroll-p-4 flex">
        <AtCard className="w-[60vw] shrink-0 snap-start">
          <View className="relative flex flex-col">
            <Image
              src="https://picsum.photos/360/240"
              className="w-full h-[30vw] object-cover"
            />
            <View className="px-4 py-2 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden">
              果冻自走棋
            </View>
            <View className="absolute top-2 left-2 px-2 py-1 flex items-center gap-2 bg-white rounded-full text-xs">
              <AtIcon
                prefixClass="fa"
                value="star"
                size={12}
                className="text-secondary"
              />
              <Text>4.5</Text>
            </View>
          </View>
        </AtCard>
        <AtCard className="w-3/5 shrink-0 snap-start">4</AtCard>
        <AtCard className="w-3/5 shrink-0 snap-start">4</AtCard>
      </View>
    </View>
  );
}
